<template>
	<view class="member-list">
		<g-navbar title="我的团队" />
		<view class="list-container">
			<scroll-view scroll-y style="height: 100%;" @scrolltolower="scrolltolower">
				<view class="list-wrapper">
					<teamMemberItem v-for="item in memberList" :detail="item" :key="item.id" />
					<g-placeholder v-if="!memberList.length&&pagination.loadingStatus===LOADING_STATUS.NOMORE" />
					<uni-load-more v-else :status="pagination.loadingStatus" />
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { onLoad } from '@dcloudio/uni-app';
	import teamMemberItem from '@/components/team-member-item/index';
	import { ITeamMember } from '@/components/team-member-item/types';
	import { reactive } from 'vue';
	import { useStore } from 'vuex';
	import REST_URL from '@/http/http.restUrl';
	import { LOADING_STATUS } from '@/enum/loadingStatus';
	import { GET_STORE_USERINFO } from '@/store/gettersType';
	
	
	const store = useStore();

	const memberList : ITeamMember[] = reactive([]);

	const pagination = reactive({
		loadingStatus: LOADING_STATUS.MORE,
		pageSize: 10,
		pageNum: 1,
	})

	onLoad(async () => {
		await uni.loginManger.$interceptor;
		getMyTeamMemberList();
	})

	const scrolltolower = () => {
		getMyTeamMemberList();
	}

	const getMyTeamMemberList = async () => {
		if (pagination.loadingStatus !== LOADING_STATUS.MORE) return
		const options = {
			customer_id: store.getters[GET_STORE_USERINFO].id,
			page: pagination.pageNum,
			page_num: pagination.pageSize,
		}
		pagination.loadingStatus = LOADING_STATUS.LOADING;
		const { data, total } = (await uni.http.POST(REST_URL.myTeamMemberList, options)).data;
		memberList.push(...data);
		pagination.loadingStatus = memberList.length >= total ? LOADING_STATUS.NOMORE : LOADING_STATUS.MORE;
		pagination.pageNum++;
	}
</script>

<style scoped lang="scss">
	@import "./memberList.scss";
</style>